<template>
  <main class="container" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">

    <!-- 导航栏区域 -->
    <TitleBar></TitleBar>
    <!-- 操作栏 -->
    <div class="op_file_class">
      <FileListPanel></FileListPanel>
      <FileContentPanel></FileContentPanel>
    </div>

  </main>
</template>


<script setup>

import { ref, onMounted } from "vue";
import TitleBar from "./components/TitleBar.vue";
import FileContentPanel from "./components/FileContentPanel.vue";
import FileListPanel from "./components/FileListPanel.vue";
import { invoke } from "@tauri-apps/api/core";
import { useStore } from "./store/store";
import { watch } from "vue";
import { inject } from "vue";


const toast = inject('toast')
const store = useStore()
//初始化
const screenWidth = ref(0)
const screenHeight = ref(0)

//挂载时
onMounted(async () => {
  screenWidth.value = window.screen.width
  screenHeight.value = window.screen.height

  //对持久化的数据进行读取，
  //invoke读取数据转json

  try {
    //配置文件的地址
    const conf = "config.txt"
    const content = await invoke('read_file', { 'path': conf })
    console.log(content)
    // console.log('读取成功')

    //转json
    const confObj = JSON.parse(content)

    //推入store当中
    confObj.map(item => store.fileList.push(item))

    if (confObj.length !== 0) {
      store.currentFile = confObj[0]
    }
    //将第一个文件写入currentFile
    // store.currentFile = confObj[0]

  } catch (e) {
    console.error('读取失败:', e)
    toast("读取失败" + e, "error")
  }

  watch(() => { return store.fileList }, async (newValue, oldValue) => {

    console.log('store.fileList newValue:', newValue)
    console.log('store.fileList oldValue:', oldValue)
    console.log(JSON.stringify(newValue));

    //保存到文件中
    const conf = "config.txt"

    try {
      await invoke('write_file', {
        path: conf,
        content: JSON.stringify(newValue)
      });
      // toast("文件持久化成功", "success")
    } catch (err) {
      console.error('写入错误:', err)
      toast("写入错误" + err, "error")
    }
  }, {
    deep: true
  })


})

</script>

<style>
:root {
  --sidebar-width: 280px;
  --header-height: 40px;
  --footer-height: 26px;
  --tab-height: 36px;
  --head-theme-dark: #1e1f24;
  --head-theme-dark: #1e1f24;
  --explorer-header: #25262c;
  /* --file-list:  */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.op_file_class {
  height: 100%;
  width: 100%;
  display: flex;
}
</style>
